<template>
  <div class="dashboard-contaier">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- 用了一个行列布局 -->

        <!-- 公司名称 -->
        <TreeTool :node-tree="company" :is-company="true" />

        <el-tree :data="treeData" default-expand-all :props="{ label:'name' }">
          <template v-slot="{data}">
            <TreeTool
              :node-tree="data"
              @addEvent="addFn"
              @delEvent="delFn"
              @editEvent="editFn"
            />
          </template>
        </el-tree>
      </el-card>
      <!-- 新增部门弹窗，利用element ui的组件实现弹窗 dialogVisible显示弹出框-->
      <!-- <AddDepts
        :dialog-visible="dialogVisible"
        @closeEvent="dialogVisible=false"
      />-->
      <AddDepts
        ref="depts"
        :dialog-visible.sync="dialogVisible"
        :pid="curId"
        @updateEvent="getDepartments"
      />
      <!--  @updateEvent 更新列表数据 -->
    </div>
  </div>
</template>

<script>
import TreeTool from './components/tree-tool.vue'
// 2.引入接口函数
import { delDepartment, getDepartments } from '@/api/departments'
import { listToTreeDate } from '@/utils/index'
import AddDepts from './components/add-depts.vue'
export default {
  components: {
    TreeTool,
    AddDepts
  },
  data() {
    return {
      company: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人',
        // id是一级部门的父id
        id: ''
      },
      treeData: [],
      dialogVisible: false,
      curId: ''
    }
  },
  created() {
    // 获取部门列表数据
    this.getDepartments()
  },
  // 3.created钩子函数中调用接口，请求并保存数据
  methods: {
    // 获取部门列表数据
    async getDepartments() {
      const res = await getDepartments()
      // console.log(res)
      // 保存公司名称
      this.company.name = res.companyName
      // 保存部门列表
      this.treeData = listToTreeDate(res.depts, '')
    },
    // 在父组件的事件处理函数中控制弹窗显示
    addFn(id) {
      // console.log(id)
      this.dialogVisible = true
      // 保存当前点击按钮所在的部门id
      this.curId = id
    },
    // 删除,添加询问框，element-ui，MessageBox弹框的this.$confirm方法
    delFn(id) {
      // console.log(79, id)
      // 调用接口函数
      this.$confirm('是否确定删除该部门?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delDepartment(id)
        // 更新列表
        this.getDepartments()
      }).catch(() => {
        console.log('用户点击了取消')
      })
    },
    // 编辑部门
    editFn(id) {
      this.dialogVisible = true
      // 保存当前点击按钮所在的部门id
      this.curId = id
      this.$nextTick(() => {
      // console.log(103, this.$refs.depts)
        this.$refs.depts.getDepartmentDetail()
      })
    }
  }
}
</script>

<style scoped>
.tree-card {
  padding: 30px  140px;
  font-size:14px;
}
</style>
